<template>
	<view>
		<u-navbar title="选择乘车人" :background="{background: 'transparent'}" back-icon-color="#000" title-color="#000"
		 :border-bottom="false">
			<navigator url="./addPassenger" slot="right" style="margin-right: 40rpx;">新增</navigator>
		</u-navbar>
		<view class="passenger-list">
			<view class="passenger-item">
				<view class="left">
					<u-checkbox active-color="#2D7AFE" shape="circle" v-model="checkList[0]"></u-checkbox>
					<view>
						<view>小桌子</view>
						<view>手机号 13800138000</view>
					</view>
				</view>
				<image src="../../../static/imgs/edit.png" class="right" @click="toEdit(0)"></image>
			</view>
			<view class="passenger-item">
				<view class="left">
					<u-checkbox active-color="#2D7AFE" shape="circle" v-model="checkList[1]"></u-checkbox>
					<view>
						<view>小桌子</view>
						<view>手机号 13800138000</view>
					</view>
				</view>
				<image src="../../../static/imgs/edit.png" class="right" @click="toEdit(1)"></image>
			</view>
			<view class="passenger-item">
				<view class="left">
					<u-checkbox active-color="#2D7AFE" shape="circle" v-model="checkList[2]"></u-checkbox>
					<view>
						<view>小桌子</view>
						<view>手机号 13800138000</view>
					</view>
				</view>
				<image src="../../../static/imgs/edit.png" class="right" @click="toEdit(2)"></image>
			</view>
			<view class="passenger-item">
				<view class="left">
					<u-checkbox active-color="#2D7AFE" shape="circle" v-model="checkList[3]"></u-checkbox>
					<view>
						<view>小桌子</view>
						<view>手机号 13800138000</view>
					</view>
				</view>
				<image src="../../../static/imgs/edit.png" class="right" @click="toEdit(3)"></image>
			</view>
		</view>
		<view style="width: 100%;height: 100rpx;"></view>
		<view class="btn" @click="confirm">
			<text>确定代叫</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkList: Array(4).fill(false)
			};
		},
		methods: {
			toEdit(id) {
				uni.navigateTo({
					url: './addPassenger?type=edit&id=' + id
				})
			},
			confirm() {
				uni.showToast({
					title: '选中了' + this.checkList.filter(item => item).length + '个',
					icon: 'none'
				})
				setTimeout(uni.navigateBack, 2000)
			}
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss">
	.passenger-list {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border-top: 30rpx solid #F1F1F1;

		.passenger-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 40rpx;
			border-bottom: 2rpx solid #ebebeb;

			.left {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.right {
				width: 40rpx;
				height: 40rpx;
			}

		}
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 90%;
		height: 100rpx;
		background: linear-gradient(180deg, #3FA3F9 0%, #2D7BF7 100%);
		color: #FFFFFF;
		border-radius: 20rpx;
		font-size: 32rpx;
		position: fixed;
		bottom: 20rpx;
		left: 5%;

		.small {
			font-size: 22rpx;
			margin-top: 10rpx;
		}
	}
</style>
